<template>
	<view class="box">
		<navigator open-type="navigateBack" :style="'top: ' + topNum + 'rpx'" class="back flex7">
			<van-icon name="arrow-left" color="#fff" size="44rpx"></van-icon>
		</navigator>
		<view class="top">
			<view style="position: relative;">
				<image :src="user_info.avatar" mode="aspectFill" class="top_img"></image>
			</view>
			<view class="top_content">
				<view class="top_info flex3">
					<image :src="user_info.avatar" mode="aspectFill"></image>
					<view class="color_fff">
						<view class="font_54 text_bold">{{user_info.mobile?user_info.mobile: '暂无手机号'}}</view>
						<view class="font_27 flex1 user_m1">
							<navigator url="./phone" hover-class="none" class="top_phone">更换手机号</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg_fff content hidden">
			<navigator hover-class="none" :open-type="index == 0?'switchTab': 'navigate'" :url="item.url"
				class="list flex3" v-for="(item, index) in list_array" :key="item">
				<image :src="item.icon" :style="'width: ' + item.w + 'rpx;height: '+ item.h + 'rpx;margin: ' + item.m">
				</image>
				<view class="w_flex1 font_35 list_center color_18">{{item.title}}</view>
				<van-icon name="arrow" custom-style="font-weight: bold" color="#D2D2D2" />
				<button plain open-type="contact" v-if="!item.url"></button>
			</navigator>
			<navigator url="../merchant/index" hover-class="none" class="btn1"
				v-if="user_info.role_id && user_info.role_id != 0">切换商家端
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topNum: '',
				user_info: {},
				list_array: [{
					w: 31,
					h: 38,
					m: '0 6rpx',
					title: '我的订单',
					url: '/pages/user/order',
					icon: '../../static/image/user/g@2x.png',
				}, {
					w: 38,
					h: 30,
					m: '0 3rpx',
					title: '优惠券',
					url: '/pages/user/coupon',
					icon: '../../static/image/user/f@2x.png',
				}, {
					w: 43,
					h: 35,
					title: '商务合作',
					url: '/pages/user/cooperat',
					icon: '../../static/image/user/c@2x.png',
				}, {
					w: 38,
					h: 35,
					m: '0 3rpx',
					title: '联系客服',
					icon: '../../static/image/user/d@2x.png',
				}, {
					w: 38,
					h: 31,
					m: '0 3rpx',
					title: '意见反馈',
					url: '/pages/user/feedback',
					icon: '../../static/image/user/b@2x.png',
				}, {
					w: 38,
					h: 38,
					m: '0 3rpx',
					title: '常见问题',
					url: '/pages/user/issue',
					icon: '../../static/image/user/e@2x.png',
				}]
			}
		},
		onLoad() {
			this.topNum = (uni.getSystemInfoSync()['statusBarHeight'] * 2) + 25;
			// this.get_user_info();
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				getApp().get_navigate_url('/pages/index/login');
				return;
			}

			if (uni.getStorageSync('isChangePhone')) {
				this.get_user_info();
				uni.removeStorageSync('isChangePhone');
			} else {
				this.get_user_info();
			};
      uni.setStorageSync('upOrder',1)
		},
		methods: {
			get_user_info() {
				this.$http.get(this.$api.getMemberInfo).then(res => {
					if (res.data.mobile) {
						res.data.mobile = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(7);
					}

					this.user_info = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.back {
		left: 6rpx;
		z-index: 99;
		position: fixed;
	}

	.btn1 {
		margin: 100rpx auto 50rpx;
	}

	.top {
		position: relative;

		.top_img {
			width: 100%;
			height: 587rpx;
			filter: blur(4px);
		}

		.top_content {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			position: absolute;

			.top_info {
				margin: 244rpx 0 0;
				padding: 0 44rpx;

				image {
					width: 131rpx;
					height: 131rpx;
					border-radius: 50%;
					margin-right: 33rpx;
				}
			}

			.top_phone {
				padding: 6rpx 14rpx;
				border-radius: 35rpx;
				border: 1px solid #fff;
			}
		}
	}

	.user_m1 {
		margin-top: 4rpx;
	}

	.content {
		top: -139rpx;
		position: relative;
		border-radius: 48rpx 48rpx 0 0;

		.list {
			position: relative;
			padding: 20rpx 46rpx;

			&:first-child {
				margin-top: 20rpx;
			}

			button {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: none;
				position: absolute;
			}
		}

		.list_center {
			padding: 0 29rpx;
		}
	}
</style>
